<template>
	<page-meta>
	    <navigation-bar
			title="设备维护计划--编辑"
			background-color="#EEEEEE"
			front-color="#ffffff "
	    />
	</page-meta>
	<view style="margin: 20px">
	    <view class="basicInfo">
			<uni-section title="基本信息" type="line"></uni-section>
			<view class="example-body message">
				<view>
					<view class="itemTr"><text decode="true">站台名称:&nbsp;&nbsp;&nbsp;&nbsp;{{planInfo.stationName}}</text></view>
					<view class="itemTr"><text decode="true">专业:&nbsp;&nbsp;&nbsp;&nbsp;{{planInfo.doMain}}</text></view>
					<view class="itemTr"><text decode="true">系统名称:&nbsp;&nbsp;&nbsp;&nbsp;{{planInfo.systemName}}</text></view>
					<view class="itemTr"><text decode="true">设备类型:&nbsp;&nbsp;&nbsp;&nbsp;{{planInfo.eventType}}</text></view>
					<view class="itemTr"><text decode="true">设备名称:&nbsp;&nbsp;&nbsp;&nbsp;{{planInfo.eventName}}</text></view>
					<view class="itemTr"><text decode="true">维修方式:&nbsp;&nbsp;&nbsp;&nbsp;{{planInfo.maintainWay}}</text></view>
				</view>
			</view>
			<form @submit="submitForm">
				<uni-section title="更新维修计划" type="line"></uni-section>
				<view class="example-body message">
					<view class="layui-col-md6">
						<view class="layui-form-item">
							<label class="layui-form-label">首次维修计划日期</label>
							<view class="layui-inline">
								<i class="layui-icon layui-icon-date"></i>
								<input
									name="maintainfirstTime"
									ref="maintainfirstTime" 
									:value="submitData.maintainfirstTime" 
									placeholder="请选择时间" 
									autocomplete="off" 
									class="uni-input"
									@click="showPop($event, 'maintainfirstTime')"
									disabled >
							</view>
						</view>
						<view class="layui-form-item">
							<label class="layui-form-label">本次维护计划日期</label>
							<view class="layui-inline">
								<i class="layui-icon layui-icon-date"></i>
								<input
									name="maintainthisTime"
									ref="maintainthisTime" 
									:value="submitData.maintainthisTime" 
									placeholder="请选择时间" 
									autocomplete="off" 
									class="uni-input"
									@click="showPop($event, 'maintainthisTime')"
									disabled >
							</view>
						</view>
						<view class="layui-form-item">
							<label class="layui-form-label">下次维护计划日期</label>
							<view class="layui-inline">
								<i class="layui-icon layui-icon-date"></i>
								<input 
									name="maintainnextTime"
									ref="maintainnextTime" 
									:value="submitData.maintainnextTime" 
									placeholder="请选择时间" 
									autocomplete="off" 
									class="uni-input"
									@click="showPop($event, 'maintainnextTime')"
									disabled >								
							</view>
						</view>
						<view class="layui-form-item">
							<label class="layui-form-label">距离下次维修计划间隔(天)</label>
							<view class="layui-inline">
								<i class="layui-icon layui-icon-date"></i>
								<input
									name="intervalDay"
									ref="intervalDay" 
									:value="submitData.intervalDay" 
									placeholder="请选择时间" 
									autocomplete="off" 
									class="uni-input"
									disabled >									
							</view>
						</view>
						<view class="layui-form-item">
							<label class="layui-form-label">维修状态:</label>
							<view class="layui-inline">
								<xfl-select
									:list="statuList"
									:clearable="true"
									:showItemNum="5" 
									:listShow="false"
									:isCanInput="false"  
									:style_Container="'height: 50px; font-size: 16px;'"
									:initValue="planInfo.statu"
									:option="optionConf"
									@change="statuChange($event)"
									@clear="statuChange($event)"
									:selectHideType="'hideAll'"></xfl-select>
							</view>
						</view>
						<view class="layui-form-item">
							<view class="layui-form-item">
								<label class="layui-form-label">是否维修计划 </label>
								<view class="layui-inline">
									<xfl-select
										:list="isPlanSelectList"
										:clearable="true"
										:showItemNum="5" 
										:listShow="false"
										:isCanInput="false"  
										:style_Container="'height: 50px; font-size: 16px;'"
										:initValue="planInfo.isPlan"
										:option="optionConf"
										@change="isPlanChange($event)"
										@clear="isPlanChange($event)"
										:selectHideType="'hideAll'"></xfl-select>
								</view>
							</view>
						</view>
					</view>
				</view>
				<uni-section title="维修记录" type="line"></uni-section>
				<z-table
					:tableData="mtRecordList" 
					:columns="mtRecordTableColumns" 
					:textAlign="'center'" 
					:titleTextAlign="'center'"></z-table>
				<uni-pagination :show-icon="true" :total="mtRecordTotal" @change="pageChange"></uni-pagination>
				<view class="submit-button">
				  <button type="primary" form-type="submit">提交</button>
				</view> 
			</form>
				
			<minPopup heightSize="500" :show="show" @close='close'>
				<minPicker 
					:endTime="endTime" 
					:startTime="startTimes" 
					@cancel="cancel" 
					@sure="sure"></minPicker>
			</minPopup>
			<uni-popup ref="popupMessage" type="center">
				<uni-popup-message type="error" :message="errorMessage" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script>

import minPicker from '@/components/min-picker/min-picker.vue'
import minPopup from '@/components/min-picker/min-popup.vue'
import uniPagination from '@/components/uni-pagination/uni-pagination.vue'
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	
export default {
	data () {
		return {
			planInfo: {},
			startTimes:[2010,6,1],
			endTime: 2100,
			show:false,
			targetInputData: '',
			submitData: {
				taskNum: '',
				maintainfirstTime: '',
				maintainnextTime: '',
				maintainthisTime: '',
				intervalDay: '',
				isPlan: '',
				statu:''
			},
			optionConf: {
				label: 'label',
				value: 'value'
			},
			isPlanSelectList: [
				{
					label: '是',
					value: '1'
				},
				{
					label: '否',
					value: '0'
				},
			],
			statuList: [],
			mtRecordList: [],
			mtRecordTotal: 0,
			errorMessage: '',
			mtRecordTableColumns: [
				{
					title: '工单号',
					key: 'taskNum',
					width: 100
				},
				{
					title: '维修日期',
					key: 'maintainDate',
					width: 350
				},
				{
					title: '维修方式',
					key: 'maintainWay',
					width: 150
				},
				{
					title: '维修人',
					key: 'maintainPerson',
					width: 150
				},
				{
					title: '维修内容',
					key: 'maintainContent',
					width: 150
				},
				{
					title: '工单状态',
					key: 'taskStatus',
					format: "已恢复0;处理中1;已搁置2;未处理3;已处理",
					width: 150
				},
			],
		}
	},
	methods: {
		initMtRecord(currentPage, pageSize) {
			this.$myRequest({
				url: '/alertManager/queryMtRecord',
				method: 'POST',
				data: {
					limit: pageSize,
					page: currentPage
				}
			}).then(rep => {
				this.mtRecordList = rep.rows
				this.mtRecordTotal = rep.total
			})
		},
		statuChange (e) {
			if (e) {
				this.submitData.statu = e.newVal.value
			} else {
				this.submitData.statu = ''
			}
		},
		isPlanChange (e) {
			if (e) {
				this.submitData.isPlan = e.newVal.value
			} else {
				this.submitData.isPlan = ''
			}
		},
		//-------------------日期差值计算-----------------------------
		getDiff (now,next){
			var days = new Date(next).getTime() - new Date(now).getTime();
			var time = parseInt(days / (1000 * 60 * 60 * 24));
			return time;
		},
		// ------------------日期选择器----------------------
		// 取消事件
		cancel(){
		    this.close()
		},
		// 确认事件
		sure(e){
			this.submitData[this.targetInputData] = e.a + '-' + e.b + '-' + e.c
			if(this. targetInputData === 'maintainnextTime' || this. targetInputData === 'maintainthisTime'){
				let interval = this.getDiff(this.submitData.maintainthisTime, this.submitData.maintainnextTime)
				this.submitData.intervalDay = interval
			}
		    // 输出 { year: 100100,month: 3,day: 23}
		},
		// picker显示
		showPop(event, paramName){
			this.targetInputData = paramName
		    this.show = true
		},
		// 关闭picker
		close(){
		    this.show = false
		},
		
		//-----------------------------------------------
		submitForm (e) {
			console.log(this.submitData)
			if(this.submitData.maintainfirstTime === this.planInfo.maintainfirstTime 
				&& this.submitData.maintainnextTime === this.planInfo.maintainnextTime
				&& this.submitData.maintainthisTime === this.planInfo.maintainthisTime
				&& this.submitData.isPlan === this.planInfo.isPlan
				&& this.submitData.statu === this.planInfo.statu){
				uni.navigateTo({
					url:'./equipmentPlan',
					success: res => {
						console.log('跳转成功');
					},
					fail: res => {
						console.log(res);
					},
				});
			}else {
				uni.showLoading({
					title:"修改中，请稍等...",
					mask:true
				});
				this.$myRequest({
					url: '/et/maintain/updateMaintain',
					method: 'POST',
					data: this.submitData
				}).then(rep => {
					if(rep.code === 'success'){
						uni.navigateTo({
							url:'./equipmentPlan',
							success: res => {
								console.log('跳转成功');
							},
							fail: res => {
								console.log(res);
							},
						});
					}else {
						this.$refs.popupMessage.open()
						this.errorMessage = rep.message
					}
				})
			}
		},
		pageChange (e) {
			this.initMtRecord(e.current,10)
		}
	},
	components:{
		minPicker,
		minPopup,
		uniPagination,
		uniPopupMessage,
	},
	onLoad: function (option) {
		const item = JSON.parse(decodeURIComponent(option.plan));
		const statuList = JSON.parse(decodeURIComponent(option.statuList));
		this.planInfo = item
		this.statuList = statuList
		this.submitData.taskNum = item.taskNum
		this.submitData.maintainfirstTime = item.maintainfirstTime
		this.submitData.maintainnextTime = item.maintainnextTime
		this.submitData.maintainthisTime = item.maintainthisTime
		this.submitData.intervalDay = item.intervalDay
		this.submitData.isPlan = item.isPlan
		this.submitData.statu = item.statu
	},
	created: function () {
		this.initMtRecord(1,10)
	}
}
</script>

<style>
	.baseInfo {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
	}
	
	.baseInfo-left {
		flex-basis: 100%
	}
	
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0;
		font-size: 14px;
		background-color: #f7f7f7;
		flex-direction: column;
		margin: 0rpx 30rpx 0rpx;
	}
	
	.submit-button {
		margin: 50rpx 30rpx 0rpx;
	}
	
	.popup-content {
		background-color: #fff;
		padding: 15px;
	}
</style>
